import * as THREE from '../../build/three.module.js';
import {
  OrbitControls
} from '../../jsm/controls/OrbitControls.js';

const scene = new THREE.Scene();

/**
 * 一个复杂的曲面模型，往往模型顶点数量比较多，模型文件比较大
 * 为了降低模型文件大小，法线贴图.normalMap算法自然就产生了，
 * 复杂的三维模型3D美术可以通过减面操作把精模简化为简模，
 * 然后把精模表面的复杂几何信息映射到法线贴图.normalMap上。
 */
const earthGeo = new THREE.SphereGeometry(200, 50, 50);
const txrl = new THREE.TextureLoader();
const txr = txrl.load('../../textures/earth_atmos_2048.jpg');
// 加载法线贴图
const txrNormal = txrl.load('../../textures/earth_normal_2048.jpg');
const earthMat = new THREE.MeshPhongMaterial({
  map: txr,
});
const earthNormalMat = new THREE.MeshPhongMaterial({
  map: txr,
  normalMap: txrNormal,
  // 设置深浅
  normalScale: new THREE.Vector2(3, 3)
})
const earth = new THREE.Mesh(earthGeo, earthMat);
const earthNormal = new THREE.Mesh(earthGeo, earthNormalMat);
earth.translateX(-200);
earthNormal.translateX(200);
scene.add(earth);
scene.add(earthNormal);

const al = new THREE.AmbientLight(0xffffff);
scene.add(al);
const k = innerWidth / innerHeight,
      s = 200,
      camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 10000);
camera.position.set(0, 0, 400);
camera.lookAt(scene.position);
const renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xaaaaaa);
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
new OrbitControls(camera, renderer.domElement);

(function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
})();
